import React from "react";
import { isValidArr } from "@/utils";
import { RankItemComp } from "@/components/pages/rank";
import { motion } from "framer-motion";

const pageName = "rank.list";
const klassName = pageName.replace(/\./g, '-');


export default function Comp({data, self}) {
  const containerVar = {
    hidden: {opacity: 0},
    visible: {
      opacity: 1,
      transition: {
        delayChildren: 0.05,
        staggerChildren: 0.05,
      }
    },
  };

  const itemVar = {
    hidden: {y: 50, opacity: 0},
    visible: {
      y: 0,
      opacity: 1,
    },
  };

  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        {/* <div className="cp-rank-columns">
         <div className="inner">
           <div className="rank">
             排名
           </div>
           <div className="profile">
             用户
           </div>
           <div className="value">
             U电值
           </div>
         </div>
        </div> */}

        {
          isValidArr(data, 3) ?
            <motion.div className="content"
                        variants={containerVar}
                        // initial="hidden"
                        animate="visible"
                        exit="exit"
                        style={{minHeight: "200px", maxHeight:"400px"}}
            >
              {
                data.map((item, index) => {
                  if (item.rank <= 3) return null;
                  return (
                    <motion.div key={index} variants={itemVar}>
                      <RankItemComp item={item} key={index} />
                    </motion.div>
                  )
                })

              }
            </motion.div>
            :
            <motion.div className="content text-center p-3">
              无数据
            </motion.div>
        }
      </div>
    </div>
  )
}